<template>
	<!-- 特权福利 -->
	<view class="welfare">
		<view class="top_nav">
			<view v-if="index==0||index>0" :class="topNavActiveIndex==index ?'top_nav_active':''" v-for="(item,index) in topNavList" :key='index' @click="topNavCk(index)">
				{{ item }}
			</view>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="'height:'+height+'px'" v-if='topNavActiveIndex == 1&&showVideo' @scrolltolower="loadingMore" @scroll="scroll">
			<view class="inner">
			<view class="video-data-content" v-for="(one,index) in videoList" :key="index">
				<view class="video-src">
					<video :id="index" :src="one.video_url" custom-cache="false" style="width:100%;height:100%;" controls :show-fullscreen-btn="false" :show-progress="true" :show-play-btn="false" objectFit="fill" :show-center-play-btn="false" :initial-time='0.01' :enable-play-gesture="true" @play="startPlay(index,one)" @pause="pausePlay(index,one)" @ended="endedPlay(index,one)"></video>
					<view class="video-src-title">
						{{one.title}}
					</view>
					<view class="popularity-value" v-if="one.virtual_play_num!=undefind">
						{{one.play_num}}人气
					</view>
					<image v-show="one.showCenBtn" src="../../static/play.png" class="playBtn" @click="playVideo(index,one)"></image>
					<image @click="toFullScreen(index,one)" src="../../static/fullScreen.png" class="fullIcon"></image>
				</view>
				<view class="video-user">
					<view style="overflow: hidden;">
						<image :src="one.avatarUrl" style="width: 64upx;height: 64upx;border-radius:50%;vertical-align: middle;"></image>
						<text style="vertical-align: middle;margin-left: 20upx;color: #000000;font-size: 30upx;">{{one.nickName}}</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button :id="index" open-type="share" class="share" style="text-align:left;">
						分享
						<image :src="choiceness_weixin_icon"></image>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button :id="index" @click="open_share_tip(one)" class="share" style="text-align:left;">
						分享
						<image :src="choiceness_weixin_icon"></image>
					</button>
					<!-- #endif -->
				</view>
			</view>
			</view>
		</scroll-view>
		<!-- 特权活动 -->
		<privilegeActivity ref="privilege"  v-if='topNavActiveIndex == 2'></privilegeActivity>
		<!-- 小幸运 -->
		<smallLucky v-if='topNavActiveIndex == 3'></smallLucky>
		<!-- xi -->
		<!-- 小程序直播 -->
		<appletLive v-if='topNavActiveIndex==0 '></appletLive>
		<ending></ending>
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import smallLucky from './smallLucky/smallLucky.vue'
	import privilegeActivity from './privilegeActivity/privilegeActivity.vue'
	import appletLive from './appletLive.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import ending from '../../common/ending.vue'
	export default{
		onShareAppMessage(res) {
			let id = res.target.id
			console.log(id,'分享-------------',this.videoList[id].id);
			let data = {
				share_id:Math.random().toString(15).substr(2),//分享链接标识
				id: this.videoList[id].id,//视频id
				token: this.$store.getters.getToken,//分享人的token
				user_id: this.$store.getters.getUserId,//分享人的id
			}
			return {
				title: this.videoList[id].title,
				path: '/pages/welfare/shareVideoSee/shareVideoSee?data='+JSON.stringify(data)+'&videoUrl='+this.videoList[id].video_url+'&fromJin=2',//视频路径,
				imageUrl: this.videoList[id].share_img
			}
		},
		components:{smallLucky,privilegeActivity,appletLive,ending,uniPopup},
		data(){
			return {
				choiceness_weixin_icon: this.$imgUrl+'img/privilege/choiceness_weixin_icon.png',
				topNavList:['直播','','精选好课','小幸运'],
				topNavActiveIndex: 0,
				token: this.$store.getters.getToken,
				videoList: [],
				height: 0,
				video:null,
				newVideo: null,
				pagesize: 6,
				page: 1,
				last_page: 1,
				// 播放记录id
				recordId: 0,
				// 开始播放的视频的索引
				playIndex: -1,
				lastIndex: 0,
				oldList: [],
				scrollTop: 0,
				oldTop: 0,
				showVideo: false,
				scrollTop2: 0
			}
		},
		onLoad() {
			this.topNavActiveIndex = 0
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			console.log('onLoad, 获取高度', this.height)
		},
		onShow() {
			this.topNavActiveIndex = this.lastIndex
			if(this.oldList.length>0&&this.topNavActiveIndex==3) {
				this.videoList=this.oldList
				this.scrollTop=this.oldTop
				this.oldTop=0
				this.oldList=[]
			}else {
				this.getList()
			}
			this.video= uni.createVideoContext(String(0))
			this.isShowVideo()
		},
		onHide() {
			if(this.video!=null) {
				this.video.pause()
				this.video = null
			}
			this.lastIndex = this.topNavActiveIndex
			this.topNavActiveIndex = -1
		},
		onUnload() {
			if(this.video!=null) {
				this.video.pause()
				this.video = null
			}
			this.oldList=[]
		},
		methods:{
			isShowVideo() {
				this.$api.check_featured_video({
					isNoNeedLoading: true
				}).then(res=>{
					if(res.status) {
						this.showVideo=true
						this.topNavList = ['直播','精选视频','精选好课','小幸运']
					}else {
						this.topNavList = ['直播','','精选好课','小幸运']
						this.showVideo=false
						this.topNavActiveIndex=0
					}
					console.log('展示精选视频？',res)
				}).catch(err=>{
					console.log('展示精选视频？',err)
				})
			},
			scroll(e) {
				// console.log('触发ss了scroll', e.detail.scrollTop)
				this.scrollTop2 = e.detail.scrollTop
				// this.scrollTop2 = e.detail.scrollTop
			},
			topNavCk(index){
				this.topNavActiveIndex = index
				if(this.topNavActiveIndex==0) {
					this.getList()
				}
			},
			// 获取精选视频列表
			getList() {
				this.scrollTop=0
				this.videoList=[]
				this.page = 1
				let data = {
					token: this.token,
					page: 1,
					pagesize: this.pagesize
				}
				this.$api.getVideoList(data).then(res => {
					if(res.status) {
						for(let i=0;i<res.list.data.length;i++) {
							res.list.data[i].showCenBtn = true
						}
						this.videoList = res.list.data
						this.last_page = res.list.last_page
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取精选视频列表',res)
				}).catch(err => {
					console.log('获取精选视频列表',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						page: this.page,
						pagesize: this.pagesize
					}
					this.$api.getVideoList(data).then(res => {
						if(res.status) {
							for(let i=0;i<res.list.data.length;i++) {
								res.list.data[i].showCenBtn = true
							}
							this.videoList = this.videoList.concat(res.list.data)
							console.log('视频================', this.videoList)
							this.last_page = res.list.last_page
							
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						console.log('获取精选视频列表',res)
					}).catch(err => {
						console.log('获取精选视频列表',err)
					})
				}
			},
			
			open_share_tip(res) {
				let data = {
					share_id:Math.random().toString(15).substr(2),
					id:res.id, //视频id
					token: this.$store.getters.getToken,//分享人的token
					user_id: this.$store.getters.getUserId,//分享人的id
				}
				let link=this.$store.state.H5URL+'pages/welfare/shareVideoSee/shareVideoSee?data='+JSON.stringify(data)+'&videoUrl='+res.video_url+'&fromJin=2'
				let share_detail = '这是精选视频的分享详情'
				this.share(res.title,share_detail,res.share_img,link=link)
				this.$refs.shareTip.open();
			},
			toFullScreen(index,one) {
				this.oldList = this.videoList
				this.scrollTop = this.scrollTop2
				this.oldTop=this.scrollTop
				console.log('去全屏')
				uni.navigateTo({
					url: './fullScreenVideo?videoUrl='+one.video_url+'&id='+one.id
				})
			},
			playVideo(index,one) {
				console.log('playVideo----index', index, 'playVideo----one', one)
				let newVideo = uni.createVideoContext(String(index))
				if(newVideo!=this.video) {
					console.log('this.video', this.video)
					var ret = this.video.pause()
					
					console.log('hhhhhhhhhh',ret)
					newVideo.play()
					one.showCenBtn=false
				}else {
					this.video.play()
					one.showCenBtn=false
				}
				//console.log('this.video',this.video,'newVideo',newVideo)
				this.video = newVideo
			},
			// 开始播放
			startPlay(index,one) {
				console.log('启动播放',index,'newVideo',one)
				this.playIndex = index
				one.showCenBtn =false
				let newVideo = uni.createVideoContext(String(index))
				if(newVideo!=this.video) {
					this.video.pause()
					newVideo.play()
				}
				this.video = newVideo
				if(this.token){
					let data = {
						token: this.token,
						user_id: this.$store.getters.getUserId,
						video_id: one.id,
						is_finish: 2,
						isNoNeedLoading: true
					}
					this.$api.add_watch_record(data).then(res => {
						if(res.status) {
							this.recordId = res.res
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						console.log('添加视频观看记录',res)
					}).catch(err => {
						console.log('添加视频观看记录',err)
					})
				}
			},
			// 暂停播放
			pausePlay(index,one) {
				one.showCenBtn = true
			},
			// 播放结束
			endedPlay(index,one) {
				one.showCenBtn = true
				if(this.playIndex == index) {
					let data = {
						token: this.token,
						id: this.recordId,
						is_finish: 1,
						isNoNeedLoading: true
					}
					this.$api.update_watch_record(data).then(res => {
						console.log('编辑视频观看记录',res)
					}).catch(err => {
						console.log('编辑视频观看记录',err)
					})
				}
			}
		}
	}
</script>

<style>
	.fullIcon {
		width: 32upx;
		height: 32upx;
		position: absolute;
		right: 20upx;
		bottom: 22upx;
	}
	.playBtn {
		width: 98upx;
		height: 98upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.top_nav{
		width: 100%;
		height: 88upx;
		position: fixed;
		top: 0;left: 0;
		line-height: 88upx;
		background-color: #fff;
		box-sizing: border-box;
		color: #666;
		display: flex;
		padding-left: 112upx;
		padding-right: 118upx;
		justify-content: space-between;
		z-index: 999;
		font-size: 28upx;
	}
	.top_nav_active {
		color: #00A66A;
		position: relative;
		font-size: 32upx;
	}
	.top_nav_active::after {
		position: absolute;
		content: '';
		width: 84upx;
		height: 4upx;
		background-color: #00A66A;
		bottom: 4upx;
		left: 50%;
		transform: translate(-50%,0);
	}
	page{
		width: 100%;
		height: 100%;
		position: relative;
		background: #F5F6F9;
	}
	.video-data-content{
		width: 49%;
		height: 730upx;
		background: #fff;
		margin-bottom: 16upx;
	}
	.video-data-content:first-child,.video-data-content:nth-child(2) {
		margin-top: 88upx;
	}
	.video-src{
		width: 100%;
		height: 626upx;
		position: relative;
	}
	.video-src-title{
		position: absolute;
		top: 10upx;left: 20upx;
		line-height: 50upx;
		color: #fff;
		word-break: break-all;
	}
	.popularity-value{
		color: #FEFFFF;
		font-size: 26upx;
		position: absolute;
		left: 20upx;bottom: 18upx;
	}
	.video-user{
		width: 100%;
		height: 104upx;
		padding: 24upx 10upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.video-user .share{
		width: 140upx;
		height: 60upx;
		line-height: 58upx;
		background: #45BB2F;
		border-radius: 30upx;
		color: #fff;
		padding-left: 16upx;
		box-sizing: border-box;
		position: relative;
		font-size:28upx;
	}
	.video-user .share>image{
		width: 52upx;
		height: 52upx;
		position: absolute;
		right: 4upx;
		top: 4upx;
	}
	.video-src-advertising{
		width: 120upx;
		height: 40upx;
		border-radius: 20upx;
		line-height: 40upx;
		background: rgba(0, 0, 0, 0.5);
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		position: absolute;
		left: 30upx;
		top: 30upx;
	}
	.video-src-advertising>image{
		width: 22upx;
		height: 12upx;
		margin-left: 8upx;
		vertical-align: middle;
	}
	.video-user .merchant-name{
		color: #000000;
		font-size: 30upx;
		line-height: 64upx;
	}
	.video-user .official{
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		background: #45BB2F;
		border-radius: 30upx;
		color: #fff;
		padding-left: 0;
		box-sizing: border-box;
		font-size: 28upx;
		text-align: center;
	}
	
	/* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
